ఆకర్షణీయమైన మరియు అందుబాటులో ఉండే టెక్స్ట్ సెలక్షన్ అనుభవాలను సృష్టించడానికి అధునాతన CSS కస్టమ్ హైలైట్ APIని అన్వేషించండి. వెబ్ అప్లికేషన్‌లలో వినియోగదారు ఇంటరాక్షన్‌ను మెరుగుపరచడానికి టెక్స్ట్ హైలైట్ రూపాన్ని మరియు ప్రవర్తనను అనుకూలీకరించడం మరియు నియంత్రించడం నేర్చుకోండి.
CSS కస్టమ్ హైలైట్ ఈవెంట్ హ్యాండ్లింగ్: టెక్స్ట్ సెలక్షన్ ఇంటరాక్షన్‌లను మెరుగుపరచడం
వెబ్‌లో టెక్స్ట్ సెలక్షన్ అనేది ఒక ప్రాథమిక ఇంటరాక్షన్. కంటెంట్‌ను కాపీ చేయడానికి, కోట్‌లను పంచుకోవడానికి, శోధనలు చేయడానికి లేదా కేవలం దృష్టిని కేంద్రీకరించడానికి వినియోగదారులు టెక్స్ట్‌ను హైలైట్ చేస్తారు. బ్రౌజర్‌లు డిఫాల్ట్ టెక్స్ట్ హైలైటింగ్‌ను అందిస్తున్నప్పటికీ, CSS కస్టమ్ హైలైట్ API ఈ ఇంటరాక్షన్‌పై అపూర్వమైన నియంత్రణను అందిస్తుంది, ఇది డెవలపర్‌లకు దృశ్యపరంగా ఆకర్షణీయమైన, సందర్భోచితమైన మరియు అత్యంత అందుబాటులో ఉండే సెలక్షన్ అనుభవాలను రూపొందించడానికి అనుమతిస్తుంది. ఈ బ్లాగ్ పోస్ట్ CSS కస్టమ్ హైలైట్ API యొక్క లోతులను అన్వేషిస్తుంది, దాని సామర్థ్యాలను పరిశీలిస్తుంది మరియు మీ వెబ్ అప్లికేషన్‌లను మెరుగుపరచడానికి ఆచరణాత్మక ఉదాహరణలను అందిస్తుంది.
డిఫాల్ట్ టెక్స్ట్ సెలక్షన్ ప్రవర్తనను అర్థం చేసుకోవడం
డిఫాల్ట్‌గా, బ్రౌజర్‌లు ::selection సూడో-ఎలిమెంట్‌ను ఉపయోగించి ఎంచుకున్న టెక్స్ట్‌ను స్టైల్ చేస్తాయి. రూపాన్ని మార్చడానికి మీరు background-color మరియు color ప్రాపర్టీలను మార్చవచ్చు. ఉదాహరణకు:
::selection {
background-color: #b3d4fc;
color: #000;
}
ఈ సాధారణ CSS స్నిప్పెట్, వినియోగదారు పేజీలో టెక్స్ట్‌ను ఎంచుకున్నప్పుడల్లా బ్యాక్‌గ్రౌండ్ రంగును లేత నీలం రంగులోకి మరియు టెక్స్ట్ రంగును నలుపు రంగులోకి మారుస్తుంది. అయితే, ::selection సూడో-ఎలిమెంట్‌కు పరిమితులు ఉన్నాయి. ఇది కేవలం బ్యాక్‌గ్రౌండ్ మరియు రంగును మాత్రమే స్టైల్ చేయడానికి అనుమతిస్తుంది, అనుకూలీకరణను పరిమితం చేస్తుంది. అదనంగా, దీనికి సెలక్షన్ సందర్భం గురించి సెమాంటిక్ సమాచారం లేదు. CSS కస్టమ్ హైలైట్ API ఈ పరిమితులను అధిగమిస్తుంది.
CSS కస్టమ్ హైలైట్ API పరిచయం
CSS కస్టమ్ హైలైట్ API టెక్స్ట్ సెలక్షన్‌లను నిర్వహించడానికి మరింత శక్తివంతమైన మరియు సౌకర్యవంతమైన విధానాన్ని అందిస్తుంది. ఇది నిర్దిష్ట పరిస్థితులు మరియు ఇంటరాక్షన్‌ల ఆధారంగా కస్టమ్ హైలైట్‌లను నిర్వచించడానికి మరియు స్టైల్ చేయడానికి మిమ్మల్ని అనుమతించే కొత్త CSS ప్రాపర్టీలు మరియు జావాస్క్రిప్ట్ APIలను పరిచయం చేస్తుంది.
కీలక భావనలు
- హైలైట్ ఇన్‌హెరిటెన్స్: ఇతర CSS ప్రాపర్టీల మాదిరిగానే క్యాస్కేడ్ మరియు ఇన్‌హెరిటెన్స్ మెకానిజం ద్వారా హైలైట్‌లు స్టైల్ చేయబడతాయి. అంటే మీరు రూట్ స్థాయిలో డిఫాల్ట్ హైలైట్ స్టైల్స్‌ను నిర్వచించి, నిర్దిష్ట ఎలిమెంట్‌లు లేదా సందర్భాల కోసం వాటిని ఓవర్‌రైడ్ చేయవచ్చు.
- హైలైట్ సూడో:
::highlight()సూడో-ఎలిమెంట్ పేరున్న హైలైట్‌లకు స్టైల్స్‌ను వర్తింపజేయడానికి ఉపయోగించబడుతుంది. - జావాస్క్రిప్ట్ API:
getSelection()మరియుHighlightఆబ్జెక్ట్‌ల వంటి జావాస్క్రిప్ట్ APIలు ప్రోగ్రామాటిక్‌గా హైలైట్‌లను సృష్టించడానికి, నిర్వహించడానికి మరియు వాటితో ఇంటరాక్ట్ అవ్వడానికి మిమ్మల్ని అనుమతిస్తాయి. - యాక్సెసిబిలిటీ: ఈ API ARIA అట్రిబ్యూట్‌లు మరియు యాక్సెసిబిలిటీ పరిశీలనలకు మద్దతు ఇస్తుంది, ఇది కస్టమ్ హైలైట్‌లు వైకల్యాలున్న వినియోగదారులకు గ్రహించగలిగేలా మరియు అర్థమయ్యేలా ఉండేలా నిర్ధారిస్తుంది.
కస్టమ్ హైలైట్‌లను అమలు చేయడం: ఒక దశల వారీ గైడ్
CSS కస్టమ్ హైలైట్ API ఉపయోగించి కస్టమ్ హైలైట్‌లను అమలు చేయడానికి ఇక్కడ ఒక ఆచరణాత్మక గైడ్ ఉంది:
దశ 1: పేరున్న హైలైట్‌లను నిర్వచించడం
మొదట, మీరు CSS ఉపయోగించి ఒక పేరున్న హైలైట్‌ను నిర్వచించాలి. ఈ పేరు నిర్దిష్ట సెలక్షన్‌లతో స్టైల్స్‌ను అనుబంధించడానికి ఉపయోగించబడుతుంది.
::highlight(custom-highlight) {
background-color: rgba(255, 0, 0, 0.3);
color: #000;
}
ఈ ఉదాహరణలో, మేము `custom-highlight` అనే పేరుతో ఒక హైలైట్‌ను సెమీ-ట్రాన్స్‌పరెంట్ ఎరుపు బ్యాక్‌గ్రౌండ్ మరియు నలుపు టెక్స్ట్ రంగుతో నిర్వచించాము. మీరు బ్యాక్‌గ్రౌండ్ మరియు టెక్స్ట్ కోసం ఏదైనా చెల్లుబాటు అయ్యే CSS రంగు విలువను ఎంచుకోవచ్చు.
దశ 2: జావాస్క్రిప్ట్‌లో హైలైట్‌లను సృష్టించడం
తరువాత, హైలైట్‌ను సృష్టించడానికి మరియు వర్తింపజేయడానికి జావాస్క్రిప్ట్‌ను ఉపయోగించండి. ఇందులో ఎంచుకున్న టెక్స్ట్ రేంజ్‌ను పొందడం మరియు `Highlight` ఆబ్జెక్ట్‌ను సృష్టించడం ఉంటాయి.
function applyCustomHighlight() {
const selection = window.getSelection();
if (!selection.rangeCount) {
return; // No selection
}
const range = selection.getRangeAt(0);
if (range.collapsed) {
return; // Empty selection
}
const highlight = new Highlight(range);
// Register the highlight with the document. It's experimental and may need polyfill or browser flag
if (typeof CSS !== 'undefined' && typeof CSS.highlights !== 'undefined') {
CSS.highlights.set('custom-highlight', highlight);
} else {
console.warn('CSS.highlights is not supported. Consider using a polyfill.');
// Implement a fallback mechanism here, e.g., wrapping the selected text in a with a class
// For example:
const span = document.createElement('span');
span.classList.add('fallback-custom-highlight');
span.style.backgroundColor = 'rgba(255, 0, 0, 0.3)';
span.style.color = '#000';
range.surroundContents(span);
}
selection.removeAllRanges(); // Optional: Clear the selection after highlighting
}
వివరణ:
window.getSelection(): ప్రస్తుత సెలక్షన్ ఆబ్జెక్ట్‌ను తిరిగి పొందుతుంది.selection.rangeCount: యాక్టివ్ సెలక్షన్ ఉందో లేదో తనిఖీ చేస్తుంది.selection.getRangeAt(0): ఎంచుకున్న రేంజ్‌ను పొందుతుంది.new Highlight(range): రేంజ్ నుండి కొత్త `Highlight` ఆబ్జెక్ట్‌ను సృష్టిస్తుంది.CSS.highlights.set('custom-highlight', highlight): CSS హైలైట్ రిజిస్ట్రీతో హైలైట్‌ను రిజిస్టర్ చేస్తుంది. ఇది జావాస్క్రిప్ట్ హైలైట్‌ను ముందుగా నిర్వచించిన CSS స్టైల్స్‌తో లింక్ చేసే కీలకమైన దశ.- ఫాల్‌బ్యాక్ మెకానిజం: `CSS.highlights`కు ఇంకా పూర్తి మద్దతు ఇవ్వని బ్రౌజర్‌ల కోసం కీలకమైన ఫాల్‌బ్యాక్ మెకానిజంను కలిగి ఉంటుంది. ఇది పాత బ్రౌజర్‌లలో కార్యాచరణను కొనసాగిస్తూ, మీ ఫీచర్ సరిగ్గా డిగ్రేడ్ అయ్యేలా నిర్ధారిస్తుంది.
selection.removeAllRanges(): హైలైట్ చేసిన తర్వాత సెలక్షన్‌ను క్లియర్ చేస్తుంది. ఇది ఐచ్ఛికం మరియు మీరు కోరుకున్న వినియోగదారు అనుభవంపై ఆధారపడి ఉంటుంది.
ఈ ఫంక్షన్‌ను ఒక బటన్ క్లిక్ లేదా కీబోర్డ్ షార్ట్‌కట్ వంటి ఈవెంట్ లిజనర్‌కు జతచేయడం గుర్తుంచుకోండి.
దశ 3: బహుళ రేంజ్‌లను నిర్వహించడం (ఓవర్‌ల్యాపింగ్ సెలక్షన్‌లు)
ఈ API ఒకే హైలైట్‌లో బహుళ ఓవర్‌ల్యాపింగ్ రేంజ్‌లను నిర్వహించగలదు. మీరు `Highlight` ఆబ్జెక్ట్‌కు బహుళ రేంజ్‌లను జోడించవచ్చు:
const highlight = new Highlight();
highlight.add(range1);
highlight.add(range2);
if (typeof CSS !== 'undefined' && typeof CSS.highlights !== 'undefined') {
CSS.highlights.set('custom-highlight', highlight);
} else {
console.warn('CSS.highlights is not supported. Consider using a polyfill.');
// Implement a fallback for multiple ranges (more complex)
// This would require splitting the text into smaller spans and applying styles
// This is a more advanced fallback implementation and may not be suitable for all cases
}
హైలైట్‌లోని అన్ని రేంజ్‌లకు స్టైలింగ్ వర్తింపజేయబడుతుంది.
అధునాతన వినియోగ కేసులు మరియు టెక్నిక్‌లు
CSS కస్టమ్ హైలైట్ API టెక్స్ట్ సెలక్షన్ ఇంటరాక్షన్‌లను మెరుగుపరచడానికి విస్తృత శ్రేణి అవకాశాలను తెరుస్తుంది. ఇక్కడ కొన్ని అధునాతన వినియోగ కేసులు మరియు టెక్నిక్‌లు ఉన్నాయి:
1. సందర్భోచిత హైలైటింగ్
ఎంచుకున్న టెక్స్ట్‌ను విశ్లేషించడానికి మరియు దాని కంటెంట్ లేదా పరిసర సందర్భం ఆధారంగా విభిన్న హైలైట్ స్టైల్స్‌ను వర్తింపజేయడానికి మీరు జావాస్క్రిప్ట్‌ను ఉపయోగించవచ్చు. ఉదాహరణకు, మీరు ఒక పత్రంలోని కీలకపదాలను నిర్దిష్ట రంగుతో హైలైట్ చేయవచ్చు, లేదా కోడ్ స్నిప్పెట్‌లను గుర్తించి హైలైట్ చేయవచ్చు.
function applyContextualHighlight() {
const selection = window.getSelection();
if (!selection.rangeCount) return;
const range = selection.getRangeAt(0);
const selectedText = range.toString();
let highlightName = 'default-highlight';
if (selectedText.startsWith('//')) {
highlightName = 'comment-highlight'; // Highlight code comments
} else if (selectedText.match(/\b(function|class|const|let)\b/)) {
highlightName = 'keyword-highlight'; // Highlight JavaScript keywords
}
const highlight = new Highlight(range);
if (typeof CSS !== 'undefined' && typeof CSS.highlights !== 'undefined') {
CSS.highlights.set(highlightName, highlight);
} else {
console.warn('CSS.highlights is not supported. Consider using a polyfill.');
// Fallback implementation, potentially using data attributes and custom CSS
const span = document.createElement('span');
span.classList.add('fallback-highlight');
span.dataset.highlightType = highlightName;
range.surroundContents(span);
}
selection.removeAllRanges();
}
ప్రతి హైలైట్ రకం కోసం CSS స్టైల్స్‌ను నిర్వచించండి:
::highlight(comment-highlight) {
background-color: rgba(0, 255, 0, 0.2);
color: #555;
}
::highlight(keyword-highlight) {
background-color: rgba(255, 255, 0, 0.2);
color: #000;
}
.fallback-highlight[data-highlight-type="comment-highlight"] {
background-color: rgba(0, 255, 0, 0.2);
color: #555;
}
.fallback-highlight[data-highlight-type="keyword-highlight"] {
background-color: rgba(255, 255, 0, 0.2);
color: #000;
}
2. శోధన ఫలితాలను హైలైట్ చేయడం
ఒక పత్రంలోని శోధన పదాలను హైలైట్ చేయడానికి మీరు ఈ APIని ఉపయోగించవచ్చు. శోధన ఫలితాల పేజీలు లేదా యాప్‌లో శోధన కార్యాచరణ కోసం ఇది ప్రత్యేకంగా ఉపయోగపడుతుంది.
function highlightSearchResults(searchTerm) {
const text = document.body.innerText; // Or specific element
const regex = new RegExp(searchTerm, 'gi'); // Global, case-insensitive
let match;
while ((match = regex.exec(text)) !== null) {
const start = match.index;
const end = start + searchTerm.length;
// Create a range for each match
const range = document.createRange();
range.setStart(document.body.firstChild, start);
range.setEnd(document.body.firstChild, end);
const highlight = new Highlight(range);
if (typeof CSS !== 'undefined' && typeof CSS.highlights !== 'undefined') {
CSS.highlights.set('search-result-highlight', highlight);
} else {
console.warn('CSS.highlights is not supported. Consider using a polyfill.');
// Fallback, again, requires careful handling of text nodes
}
}
}
శోధన ఫలితం హైలైట్ కోసం CSS స్టైల్‌ను నిర్వచించండి:
::highlight(search-result-highlight) {
background-color: yellow;
color: black;
}
3. షాడో DOMతో ఇంటిగ్రేట్ చేయడం
CSS కస్టమ్ హైలైట్ API షాడో DOMతో సజావుగా పనిచేస్తుంది, ఇది కస్టమ్ హైలైట్ స్టైల్స్‌తో ఎన్‌క్యాప్సులేటెడ్ కాంపోనెంట్‌లను సృష్టించడానికి మిమ్మల్ని అనుమతిస్తుంది. మీరు షాడో DOM లోపల హైలైట్‌లను నిర్వచించవచ్చు మరియు వాటిని కాంపోనెంట్‌లోని ఎలిమెంట్‌లకు వర్తింపజేయవచ్చు.
4. యాక్సెసిబిలిటీ పరిశీలనలు
మీ కస్టమ్ హైలైట్‌లు అందరు వినియోగదారులకు అందుబాటులో ఉండేలా చూసుకోండి. కింది వాటిని పరిగణించండి:
- రంగు కాంట్రాస్ట్: WCAG మార్గదర్శకాలను పాటించడానికి హైలైట్ బ్యాక్‌గ్రౌండ్ మరియు టెక్స్ట్ రంగు మధ్య తగినంత రంగు కాంట్రాస్ట్ ఉండేలా చూసుకోండి.
- కీబోర్డ్ నావిగేషన్: వినియోగదారులు కీబోర్డ్ ఉపయోగించి హైలైట్ చేసిన టెక్స్ట్‌ను నావిగేట్ చేయగలరని నిర్ధారించుకోండి.
- స్క్రీన్ రీడర్ అనుకూలత: ఎంచుకున్న టెక్స్ట్ సరిగ్గా ప్రకటించబడుతోందని నిర్ధారించుకోవడానికి మీ హైలైట్‌లను స్క్రీన్ రీడర్‌లతో పరీక్షించండి.
- ఫోకస్ ఇండికేటర్‌లు: హైలైట్ చేయబడిన ఎలిమెంట్ ఫోకస్ పొందినప్పుడు, స్పష్టమైన విజువల్ ఫోకస్ ఇండికేటర్‌ను అందించండి.
హైలైట్‌ల గురించి అదనపు సెమాంటిక్ సమాచారం అందించడానికి మీరు ARIA అట్రిబ్యూట్‌లను ఉపయోగించవచ్చు. ఉదాహరణకు, హైలైట్ చేయబడిన సెక్షన్ యొక్క ఉద్దేశ్యాన్ని వివరించడానికి మీరు aria-label ఉపయోగించవచ్చు.
5. స్థానికీకరణ మరియు అంతర్జాతీయీకరణ
ప్రపంచవ్యాప్త సందర్భంలో టెక్స్ట్ సెలక్షన్‌తో వ్యవహరించేటప్పుడు, కింది వాటిని పరిగణించండి:
- టెక్స్ట్ దిశ: మీ హైలైట్‌లు ఎడమ-నుండి-కుడి (LTR) మరియు కుడి-నుండి-ఎడమ (RTL) టెక్స్ట్ దిశలతో సరిగ్గా పనిచేస్తాయని నిర్ధారించుకోండి.
- భాషా-నిర్దిష్ట నియమాలు: టెక్స్ట్ సెలక్షన్ మరియు పదాల సరిహద్దుల కోసం భాషా-నిర్దిష్ట నియమాల గురించి తెలుసుకోండి.
- ఫాంట్ మద్దతు: విభిన్న భాషలలో ఉపయోగించే అక్షరాలకు మద్దతు ఇచ్చే ఫాంట్‌లను ఉపయోగించండి.
6. పనితీరు ఆప్టిమైజేషన్
కస్టమ్ హైలైట్‌లను వర్తింపజేయడం పనితీరును ప్రభావితం చేయవచ్చు, ముఖ్యంగా పెద్ద పత్రాలపై. కింది ఆప్టిమైజేషన్ టెక్నిక్‌లను పరిగణించండి:
- డీబౌన్సింగ్: వేగవంతమైన సెలక్షన్‌ల సమయంలో అధిక గణనలను నివారించడానికి హైలైట్ ఫంక్షన్‌ను డీబౌన్స్ చేయండి.
- క్యాచింగ్: అనవసరంగా తిరిగి గణించకుండా ఉండటానికి గణించిన హైలైట్ రేంజ్‌లను క్యాష్ చేయండి.
- వర్చువలైజేషన్: ప్రస్తుతం వ్యూపోర్ట్‌లో కనిపించే హైలైట్‌లను మాత్రమే రెండర్ చేయడానికి వర్చువలైజేషన్ టెక్నిక్‌లను ఉపయోగించండి.
- వెబ్ వర్కర్లు: ప్రధాన థ్రెడ్‌ను బ్లాక్ చేయకుండా ఉండటానికి హైలైట్ గణనలను వెబ్ వర్కర్‌కు ఆఫ్‌లోడ్ చేయండి.
బ్రౌజర్ మద్దతు మరియు పాలిఫిల్స్
CSS కస్టమ్ హైలైట్ API చాలా కొత్తది మరియు అన్ని బ్రౌజర్‌లచే పూర్తిగా మద్దతు ఇవ్వబడకపోవచ్చు. ప్రొడక్షన్‌లో ఉపయోగించే ముందు తాజా బ్రౌజర్ అనుకూలత పట్టికలను తనిఖీ చేయండి. పాత బ్రౌజర్‌లకు మద్దతు అందించడానికి పాలిఫిల్ ఉపయోగించడాన్ని పరిగణించండి. పాత బ్రౌజర్‌లు కొత్త APIని అర్థం చేసుకోవడానికి అవసరమైన కోడ్‌ను ఒక పాలిఫిల్ జతచేస్తుంది. ఆప్షన్‌లను కనుగొనడానికి ఆన్‌లైన్‌లో "CSS Custom Highlight API Polyfill" అని శోధించండి.
ముగింపు
CSS కస్టమ్ హైలైట్ API డెవలపర్‌లకు ఆకర్షణీయమైన, సందర్భోచితమైన మరియు అందుబాటులో ఉండే టెక్స్ట్ సెలక్షన్ అనుభవాలను సృష్టించే అధికారాన్ని ఇస్తుంది. ఈ API యొక్క సామర్థ్యాలను అర్థం చేసుకోవడం మరియు ఈ బ్లాగ్ పోస్ట్‌లో వివరించిన టెక్నిక్‌లను వర్తింపజేయడం ద్వారా, మీరు మీ వెబ్ అప్లికేషన్‌ల వినియోగదారు అనుభవాన్ని మెరుగుపరచవచ్చు మరియు వినియోగదారులు టెక్స్ట్‌తో ఇంటరాక్ట్ అవ్వడానికి మరింత సహజమైన మరియు దృశ్యపరంగా ఆకర్షణీయమైన మార్గాన్ని అందించవచ్చు. కస్టమ్ హైలైట్‌లను అమలు చేసేటప్పుడు యాక్సెసిబిలిటీ మరియు పనితీరుకు ప్రాధాన్యత ఇవ్వడం, మరియు బ్రౌజర్ అనుకూలత మరియు పాలిఫిల్ ఆప్షన్‌లను పరిగణించడం గుర్తుంచుకోండి. టెక్స్ట్ సెలక్షన్‌పై ఈ సూక్ష్మ నియంత్రణ డెవలపర్‌లకు నిర్దిష్ట అప్లికేషన్ అవసరాలు మరియు వినియోగదారు ప్రాధాన్యతలకు అనుగుణంగా మరింత ఇంటరాక్టివ్ మరియు యూజర్-ఫ్రెండ్లీ వెబ్ అనుభవాలను నిర్మించడానికి అధికారం ఇస్తుంది. బ్రౌజర్ మద్దతు పెరిగేకొద్దీ, CSS కస్టమ్ హైలైట్ API ఆధునిక వెబ్ డెవలప్‌మెంట్‌కు ఒక అనివార్యమైన సాధనంగా మారే వాగ్దానం చేస్తుంది.
మరింత అన్వేషణ
- MDN వెబ్ డాక్స్: హైలైట్ API
- CSS హౌడిని: ఈ అధునాతన CSS ఫీచర్‌లను ఎనేబుల్ చేసే CSS హౌడిని ప్రాజెక్ట్ గురించి మరింత తెలుసుకోండి.